<style lang="scss">
	@import "../../utils/base.scss";
    .p_content{
        font-size:13px;
        min-width: 100px;
        max-width: 200px;
        height: auto;
        word-wrap:break-word;
        word-break:break-all;
        overflow: hidden;
        padding-bottom: 4px;
    }
</style>
<template>
	<div>
		<!-- 资源 -->
		<Row v-if="dataInfo.resourceList != undefined && dataInfo.resourceList.length > 0 && (waitTaskInfo.isEdit == 24 ||waitTaskInfo.isEdit == 16 || waitTaskInfo.isEdit == 17 || waitTaskInfo.isEdit == 5 || waitTaskInfo.isEdit == 6 || (waitTaskInfo.isEdit == 9  && dataInfo.resourceList.length > 0)|| (dataInfo.resourceList.length > 0 &&((waitTaskInfo.task_def_key === '_07sonresource' ||  waitTaskInfo.task_def_key === '_08') && serviceType === 'entry' || (waitTaskInfo.task_def_key === '_3'&& serviceType === 'resourceAllo' ) ) )) ">
			<Col span="22" style="width:96.666667%;padding-bottom: 10px">
			资源服务：<span v-if="editNumber" style="color: red;">(请填写个人实际分配的数量，不含子工单分配数量)</span>
			</Col>
			<Col span="24" style="width:96.666667%;padding-bottom: 10px;padding-left: 20px">
			<resourceTable :ifedit="true" v-model="dataInfo.resourceList" :handleInfo="handleInfo" :columnsList="editNumber ? columns.resourceColumns2:columns.resourceColumns"
			 :editNumber="editNumber"></resourceTable>
			</Col>
		</Row>
		<!-- 数据表 -->
		<Row v-if="(waitTaskInfo.task_def_key === '_09data' ||  waitTaskInfo.task_def_key === '_10') && serviceType === 'entry'"
		 style="padding-bottom: 30px">
		 	<Col span="24">
			<div class="gcontent" v-if="dataInfo.datasList != undefined && dataInfo.datasList.length > 0">
				<dataList v-model="dataInfo.datasList" :ifedit="!ifedit"></dataList>
			</div>
			</Col>
		</Row>
		<!-- 工具 -->
		<Row v-if="dataInfo.toolList && dataInfo.toolList.length > 0 && (waitTaskInfo.isEdit == 24 || waitTaskInfo.isEdit == 21 || waitTaskInfo.isEdit == 20 || waitTaskInfo.isEdit == 16 || waitTaskInfo.isEdit == 17 || waitTaskInfo.isEdit == 7 || waitTaskInfo.isEdit == 8 || (waitTaskInfo.isEdit == 9 && dataInfo.toolList.length > 0) || (dataInfo.toolList.length > 0 && (((waitTaskInfo.task_def_key === '_15sontool' ||  waitTaskInfo.task_def_key === '_16') && serviceType === 'entry') || (waitTaskInfo.task_def_key === '_3'&& serviceType === 'resourceAllo' ) )))">
			<Col span="22" style="width:96.666667%;padding-bottom: 10px">
			工具服务：
			</Col>
			<Col span="24" style="width:96.666667%;padding-bottom: 10px;padding-left: 20px">
			<span v-if="editNumber" style="color: red;">(请填写个人实际分配的工具，不含子工单分配工具)</span>
			<div v-for="(item,key) in dataInfo.toolList" :key="key">
				<Row>
					<Col span="12" style="padding-bottom: 10px">
					<Checkbox v-if="editNumber" v-model="dataInfo.toolList[key].check">
					</Checkbox>
					【工具】{{item.toolName}}
					<template >
						<span v-if="item.quantity == 1 && item.waitQuantity == 0">(已分配)</span>
						<span v-else-if="item.quantity == 0 && item.waitQuantity == 0" style="color: red;">(分配中)</span>
						<span v-else style="color: rgb(187, 187, 187);">(未分配)</span>
					</template>
					</Col>

				</Row>
				<Row>
					<Col span="24" style="width: 96.666667%; padding-bottom: 20px;padding-left: 20px">
					<div style="padding-bottom: 10px">
						<resourceTable v-if="dataInfo.toolList[key].resourceProgress && dataInfo.toolList[key].resourceProgress.length > 0"
						 :ifedit="true" :key="toolKey" v-model="dataInfo.toolList[key].resourceProgress"  :handleInfo="handleInfo" :editNumber="editNumber" :columnsList="editNumber ? columns.resourceColumns2:columns.toolResource" ></resourceTable>

            <template v-if="dataInfo.toolList[key].severProgress != null && dataInfo.toolList[key].severProgress.length > 0">
              <severModel v-model="dataInfo.toolList[key].severProgress" :ifedit="true" ></severModel>
            </template>
					</div>
          <template v-if="item.spServiceType == 'openApiPlatform'">
            <open_api_platform_model :key="toolKey" :ifedit="true" :isHandel="true" :isEditTeam="true" v-model="dataInfo.toolList[key]" ></open_api_platform_model>
          </template>
					</Col>
				</Row>
			</div>
			</Col>
		</Row>
		<!-- 物理机 -->
		<Row v-if="dataInfo.severList !=undefined && dataInfo.severList.length > 0 && (waitTaskInfo.isEdit == 16 && serviceType === 'resourceAllo') || (waitTaskInfo.isEdit == 9 && dataInfo.severList.length > 0) || waitTaskInfo.isEdit == 13 || ((serviceType === 'severMachine') && (waitTaskInfo.task_def_key === '_05son' || waitTaskInfo.task_def_key == '_04son'|| waitTaskInfo.task_def_key == '_05'))">
			<Col span="22" style="width:96.666667%">
			物理机资源：<span v-if="editNumber" style="color: red;">(请填写个人实际分配的数量，不含子工单分配数量)</span>
			</Col>
			<Col span="24" style="width:96.666667%;padding-bottom: 10px;padding-left: 20px;padding-top:10px">
			<Table :columns="editNumber ? columns.severColumns2:columns.severColumns" :data="dataInfo.severList" border>
				<template slot-scope="{ row, index }" slot="severName">
					<div style="text-align: left;">
						<Checkbox v-if="editNumber" v-model="dataInfo.severList[index].check">
						</Checkbox>
						<span>{{row.service.severName}}</span>
					</div>
				</template>
				<template slot-scope="{ row, index }" slot="doneQuantity">
					<span>{{row.doneQuantity}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="doingQuantity">
					<span>{{row.doingQuantity}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="waitQuantity">
					<span>{{row.waitQuantity}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Poptip :transfer="true" placement="top-end">
						<Button>基础信息</Button>
						<div slot="title">
							{{row.service.severName}}
						</div>
						<div slot="content">
							<div slot="content" style="font-size:0;">
								<p class="p_content">CPU数量: {{row.service.cpuQuantity}}</p>
								<p class="p_content">CPU型号: {{row.service.cpuDes}}</p>
								<p class="p_content">网卡数量: {{row.service.ncquantity}}</p>
								<p class="p_content">网卡型号: {{row.service.ncdes}}</p>
								<p class="p_content">内存数量: {{row.service.ramQuantity}}</p>
								<p class="p_content">内存型号: {{row.service.ramDes}}</p>
								<p class="p_content">数据盘: {{row.service.dataVolumn + row.service.dataUnit}}</p>
								<p class="p_content">系统盘: {{row.service.sysVolumn + row.service.sysUnit}}</p>
							</div>
						</div>
					</Poptip>
				</template>
				<template slot-scope="{ row, index }" slot="quantity">
					<InputNumber :min="0" v-model="dataInfo.severList[index].quantitys" />
				</template>

			</Table>
			</Col>
		</Row>
    <Row v-if="dataInfo.severList !=undefined && dataInfo.severList.length > 0 && (waitTaskInfo.isEdit == 24 && serviceType === 'resource_resourceServer') || (waitTaskInfo.isEdit == 9 && dataInfo.severList.length > 0) || waitTaskInfo.isEdit == 13 || ((serviceType === 'severMachine') && (waitTaskInfo.task_def_key === '_05son' || waitTaskInfo.task_def_key == '_04son'|| waitTaskInfo.task_def_key == '_05'))">
    	<Col span="22" style="width:96.666667%">
    	物理机资源：<span v-if="editNumber" style="color: red;">(请填写个人实际分配的数量，不含子工单分配数量)</span>
    	</Col>
    	<Col span="24" style="width:96.666667%;padding-bottom: 10px;padding-left: 20px;padding-top:10px">
    	<Table :columns="editNumber ? columns.severColumns2:columns.severColumns" :data="dataInfo.severList" border>
    		<template slot-scope="{ row, index }" slot="severName">
    			<div style="text-align: left;">
    				<Checkbox v-if="editNumber" v-model="dataInfo.severList[index].check">
    				</Checkbox>
    				<span>{{row.service.severName}}</span>
    			</div>
    		</template>
    		<template slot-scope="{ row, index }" slot="doneQuantity">
    			<span>{{row.doneQuantity}}</span>
    		</template>
    		<template slot-scope="{ row, index }" slot="doingQuantity">
    			<span>{{row.doingQuantity}}</span>
    		</template>
    		<template slot-scope="{ row, index }" slot="waitQuantity">
    			<span>{{row.waitQuantity}}</span>
    		</template>
    		<template slot-scope="{ row, index }" slot="action">
    			<Poptip :transfer="true" placement="top-end">
    				<Button>基础信息</Button>
    				<div slot="title">
    					{{row.service.severName}}
    				</div>
    				<div slot="content">
    					<div slot="content" style="font-size:0;">
    						<p class="p_content">CPU数量: {{row.service.cpuQuantity}}</p>
    						<p class="p_content">CPU型号: {{row.service.cpuDes}}</p>
    						<p class="p_content">网卡数量: {{row.service.ncquantity}}</p>
    						<p class="p_content">网卡型号: {{row.service.ncdes}}</p>
    						<p class="p_content">内存数量: {{row.service.ramQuantity}}</p>
    						<p class="p_content">内存型号: {{row.service.ramDes}}</p>
    						<p class="p_content">数据盘: {{row.service.dataVolumn + row.service.dataUnit}}</p>
    						<p class="p_content">系统盘: {{row.service.sysVolumn + row.service.sysUnit}}</p>
    					</div>
    				</div>
    			</Poptip>
    		</template>
    		<template slot-scope="{ row, index }" slot="quantity">
    			<InputNumber :min="0" v-model="dataInfo.severList[index].quantitys" />
    		</template>

    	</Table>
    	</Col>
    </Row>

		<div v-if="detailModel">
			<Modal v-model="detailModel" title="数据表详情" width="80%">
				<div class="qheader" :style="{borderBottom: '1px solid rgb(210,210,210)'}">
					<span>数据表信息</span>
				</div>
				<div style="padding-top: 10px">
					<table border="1px" class="tale">
						<tr align="center" style="height: 3vw">
							<th style="width:10vw">表英文名</th>
							<td style="width:20vw">{{showData.tableNameEn}}</td>
							<th style="width:10vw">表中文名</th>
							<td style="width:20vw">{{showData.tableName}}</td>
							<th style="width:10vw">所属域</th>
							<td style="width:20vw">{{showData.domain}}</td>
						</tr>
						<tr align="center" style="height: 3vw">
							<th>主题域</th>
							<td>{{showData.subjectField}}</td>
							<th>更新周期</th>
							<td>{{showData.cycleType}}</td>
							<th>保存时长</th>
							<td>{{showData.keepTime}}</td>
						</tr>
						<tr align="center" style="height: 3vw">
							<th>保存时长单位</th>
							<td>{{showData.keepUnit}}</td>
							<th>数据范围</th>
							<td>{{showData.dataScope}}</td>
							<th>所属系统</th>
							<td>{{showData.oriSys}}</td>
						</tr>
						<tr align="center" style="height: 3vw">
							<th>更新时间</th>
							<td>{{showUpdateTime(showData.updateTime)}}</td>
							<th>业务口径</th>
							<td colspan="3">{{showData.caliber}}</td>
						</tr>
					</table>
				</div>
				<div class="qheader" :style="{borderBottom: '1px solid rgb(210,210,210)'}">
					<span>字段信息</span>
				</div>
				<div style="padding-top: 10px">
					<Table border :columns="detailColumns" :data="showColumns"></Table>
				</div>
				<div slot="footer">
					<Button type="primary" size="large" @click="detail_ok">确定</Button>
				</div>
			</Modal>
		</div>
	</div>
</template>
<script>
	import resourceTable from "../../base/tables"
	import dataList from '../applyVue/settledin/data_model.vue'
  import open_api_platform_model from '../applyVue/apply_model/open_api_platform_model/open_api_platform.vue'
  import severModel from '../applyVue/apply_model/server_model.vue'
	export default {
		name: "resource",
		components: {
			resourceTable,
			dataList,open_api_platform_model,severModel
		},
		data() {
			return {
        toolKey: 0,
				dataList: [],
				click: true,
				clickindex: 0,
				detailModel: false,
				showData: {},
				showColumns: [],
				detailColumns: [{
						title: '字段属性',
						key: 'fieldNameEn',
						width: 250,
						resizable: true,
					},
					{
						title: '字段名称',
						key: 'fieldName',
						width: 250,
						resizable: true,
					},
					{
						title: '数据类型',
						key: 'fieldType',
						width: 250,
						resizable: true,
					},
					{
						title: '数据样例',
						key: 'fieldEnum',
					}
				],
				columns: {
					resourceColumns: [{
							title: "资源类型",
							align: "center",
							width: 110,
							key: "clazz",
							slot: "clazz",
							fixed: 'left'
						},
						{
							title: "服务名称",
							align: "center",
							width: 110,
							key: "serviceName",
							slot: "serviceName",
						},
						{
							title: "细分项名",
							align: "center",
							width: 120,
							key: "subName",
							slot: "subName",
						},
						{
							title: '测算依据',
							key: 'purpose',
							minWidth: 300,
							align: 'center',
							slot: "reason"
						},
						{
							title: "可选项",
							align: "center",
							minWidth: 300,
							slot: "options"
						},
						{
							title: "已分配数量",
							align: "center",
							width: 80,
							key: "doneQuantity",
							slot: "doneQuantity"
						},
						{
							title: "正在分配数量",
							align: "center",
							width: 80,
							key: "doingQuantity",
							slot: "doingQuantity"
						},
						{
							title: "待分配数量",
							align: "center",
							width: 80,
							key: "waitQuantity",
							slot: "waitQuantity"
						},
					],
					resourceColumns2: [
						// {
						//   title: " ",
						//   align: "center",
						//   width: 60,
						//   key: "check",
						//   slot: "check",
						//   fixed: 'left'
						// },
						{
							title: "资源类型",
							align: "center",
							width: 110,
							key: "clazz",
							slot: "clazz",
						},
						{
							title: "服务名称",
							align: "center",
							width: 110,
							key: "serviceName",
							slot: "serviceName",
						},
						{
							title: '服务名称    ',
							key: 'subName',
							align: 'left',
							minWidth: 160,
							slot: "subName"
						},
						{
							title: '测算依据',
							key: 'purpose',
							minWidth: 300,
							align: 'center',
							slot: "reason"
						},
						{
							title: "可选项",
							align: "center",
							minWidth: 400,
							slot: "options"
						},
						{
							title: "已分配数量",
							align: "center",
							width: 80,
							key: "doneQuantity",
							slot: "doneQuantity"
						},
						{
							title: "正在分配数量",
							align: "center",
							width: 80,
							key: "doingQuantity",
							slot: "doingQuantity"
						},
						{
							title: "待分配数量",
							align: "center",
							width: 80,
							key: "waitQuantity",
							slot: "waitQuantity"
						},
						{
							title: "实际分配数量",
							align: "center",
							width: 100,
							key: "quantity",
							slot: "quantity",
							fixed: 'right'
						},

					],
					severColumns: [{
							title: "服务类型",
							align: "center",
							key: "severName",
							width: 90,
							fixed: 'left',
							slot: "severName",
						},
						{
							title: "操作系统",
							align: "center",
							key: "os",
							width: 90,
							// slot: "os"
						},
						{
							title: "raid方式",
							align: "center",
							children: [{
									title: '系统盘',
									align: 'center',
									key: "sysRaid",
									width: 80,
									// slot: "sysRaid"
								},
								{
									title: '数据盘',
									align: 'center',
									key: "dataRaid",
									width: 80,
									// slot: "dataRaid"
								},
							]
						},
						{
							title: "部署区域",
							align: "center",
							key: "place",
							width: 90,
							// slot: "place"
						},

						{
							title: "测算依据/必要性说明",
							align: "center",
							key: "purpose",
							minWidth: 160,
							// slot: "purpose"
						},
						{
							title: "需求数量",
							align: "center",
							width: 80,
							key: "quantity",
						},
						{
							title: "已分配数量",
							align: "center",
							width: 80,
							key: "doneQuantity",
							slot: "doneQuantity"
						},
						{
							title: "正在分配数量",
							align: "center",
							width: 80,
							key: "doingQuantity",
							slot: "doingQuantity"
						},
						{
							title: "待分配数量",
							align: "center",
							width: 80,
							key: "waitQuantity",
							slot: "waitQuantity"
						},
						{
							title: " ",
							align: "center",
							width: 110,
							fixed: 'right',
							slot: "action"
						},
					],
					severColumns2: [{
							title: "服务类型",
							align: "center",
							key: "severName",
							minWidth: 160,
							fixed: 'left',
							slot: "severName",
						},
						{
							title: "操作系统",
							align: "center",
							key: "os",
							width: 90,
							// slot: "os"
						},
						{
							title: "raid方式",
							align: "center",
							children: [{
									title: '系统盘',
									align: 'center',
									key: "sysRaid",
									width: 80,
									// slot: "sysRaid"
								},
								{
									title: '数据盘',
									align: 'center',
									key: "dataRaid",
									width: 80,
									// slot: "dataRaid"
								},
							]
						},
						{
							title: "部署区域",
							align: "center",
							key: "place",
							width: 90,
							// slot: "place"
						},

						{
							title: "测算依据/必要性说明",
							align: "center",
							key: "purpose",
							minWidth: 160,
							// slot: "purpose"
						},
						{
							title: "需求数量",
							align: "center",
							width: 80,
							key: "quantity",
						},
						{
							title: "已分配数量",
							align: "center",
							width: 80,
							key: "doneQuantity",
							slot: "doneQuantity"
						},
						{
							title: "正在分配数量",
							align: "center",
							width: 80,
							key: "doingQuantity",
							slot: "doingQuantity"
						},
						{
							title: "待分配数量",
							align: "center",
							width: 80,
							key: "waitQuantity",
							slot: "waitQuantity"
						},
						{
							title: "实际分配数量",
							align: "center",
							width: 100,
							key: "quantity",
							slot: "quantity",
							fixed: 'right'
						},
					],

					datasColumns: [
						"序号",
						"字段名",
						"字段类型",
						"是否加密",
						"是否必填",
						"备注"
					],
					toolResource: [{
							title: "资源类型",
							align: "center",
							width: 110,
							key: "clazz",
							slot: "clazz",
							fixed: 'left'
						},
						{
							title: "服务名称",
							align: "center",
							width: 110,
							key: "serviceName",
							slot: "serviceName"
						},
						{
							title: "细分项名",
							align: "center",
							width: 100,
							key: "subName",
							slot: "subName"
						},
						{
							title: '测算依据',
							key: 'purpose',
							minWidth: 140,
							align: 'center',
						},
						{
							title: "可选项",
							align: "center",
							minWidth: 300,
							slot: "options"
						},
						{
							title: "已分配数量",
							align: "center",
							width: 80,
							key: "doneQuantity",
							slot: "doneQuantity"
						},
						{
							title: "正在分配数量",
							align: "center",
							width: 80,
							key: "doingQuantity",
							slot: "doingQuantity"
						},
						{
							title: "待分配数量",
							align: "center",
							width: 80,
							key: "waitQuantity",
							slot: "waitQuantity"
						},
					]
				},
			}
		},
		created: function() {
			console.log("-dataInfo--resource------->", this.dataInfo)
      if(this.dataInfo.toolList && this.dataInfo.toolList.length > 0){
        this.dataInfo.toolList.forEach((item, index) => {
          if (item.spServiceType == "openApiPlatform") {
            this.getDetail(item)
          }
        })
        this.toolKey = new Date().getTime()
      }
		},
		methods: {
      /**
       * 获取openApiPlatform工具的api详情
       * @param {Object} item
       */
      async getDetail(item) {
        var param = {
          spServiceType: item.spServiceType,
          alloId: item.id
        }
        var that = this
        await this.myAjax.get({
          url: this.CONFIG.progress_url + "/sp-list/detail",
          that: that,
          params: param,
          success: function(data) {
            if (data.hasAccount) {
              data.hasAccount = 1
            } else {
              data.hasAccount = 0
            }
            that.$set(item, "spContent", data)
            console.log("item ---》", item)
            that.toolKey = new Date().getTime()
          },
        })
      },
			detailData(index) {
				console.log("-dataInfo--------->", this.dataInfo)
				this.showData = this.dataInfo.datasList[index].service;
				this.showColumns = this.dataInfo.datasList[index].fields;
				this.detailModel = true;
			},
			detail_ok() {
				this.detailModel = false;
			},
			showUpdateTime(date) {
				return this.utils.formatDate(new Date(date * 1000), "yyyy-MM-dd");
			},
			clicks(index) {
				if (this.clickindex === index) {
					if (this.click) {
						this.click = false
					} else {
						this.click = true
					}
				} else {
					if (!this.click) {
						this.click = true
					}
				}
				this.clickindex = index;
			},
		},
		props: {
			serviceType: {},
			dataInfo: {
				default: ""
			},
			waitTaskInfo: {},
			handleInfo: {
				default: false
			},
			//是否编辑 实际分配数量
			editNumber: {
				default: false
			}
		},
		computed: {

		},
		watch: {}

	}
</script>
